$height: var(--height_form);
$color: var(--font_color_s);
$color_adorn: var(--color_adorn2);
$borderRadius: var(--borderRadius);

.zj-tab{
  height: $height;
  width: 100%;
  overflow: auto;
  font-size: inherit;
  color: $color;
  .tab_area{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
  }
  .tab{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0 1em;
    transition: all .2s;
  }
}

.zj-tab.isAverage{
  .tab{ flex: 1; }
}

.zj-tabs_underline{
  position: relative;
  .tab{
    padding: 0 .5em;
  }
  .tab.selected{
    color: $color_adorn;
    // font-weight: bold;
  }
  .tab_underline{
    height: 4rpx;
    width: 100%;
    position: absolute;
    bottom: 0; left: 0;
    .tab_underline_inner{
      height: 100%;
      background-color: $color_adorn;
      position: absolute;
      top: 0;
      transition: all .2s;
    }
  }
}
.zj-tabs_borderButton{
  .tab{
    border-width: 2rpx;
    border-style: solid;
    border-color: #ddd;
    border-right-width: 0;
    &:first-child{ border-radius: $borderRadius 0 0 $borderRadius; }
    &:last-child{ border-right-width: 2rpx; border-radius: 0 $borderRadius $borderRadius 0; }
  }
  .tab.selected{
    border-color: $color_adorn;
    color: $color_adorn;
    &+.tab{ border-left-color: $color_adorn; }
  }
}